<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/layui.css"/>
    <script type="text/javascript" src="/js/jquery-1.11.1.js"></script>
    <script src="/js/layui.js"></script>
</head>
<body>
<form class="layui-form" action="" id="myForm">

    <div class="layui-form-item">
        <label class="layui-form-label">登录账号</label>
        <div class="layui-input-block">
            <input type="text" name="u_logInName" placeholder="登录账号" autocomplete="off"
                   class="layui-input" disabled>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="u_name" placeholder="姓名" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系方式</label>
        <div class="layui-input-block">
            <input type="text" name="u_phone" placeholder="联系方式" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="u_email" placeholder="邮箱" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">修改密码</label>
        <div class="layui-input-inline" id="switchApplication">
            <input type="checkbox"  lay-skin="switch">
        </div>
        <div id="application">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-inline">
                <input type="password" name="oldPassword" placeholder="旧密码" autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
                <input type="password" name="newPassword" placeholder="新密码" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">启用</label>
        <div class="layui-input-block">
            <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo" id="submit">立即提交</button>
        </div>
    </div>

</form>
</body>

<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form;
    });
    // //Demo
    // layui.use('form', function () {
    //     var form = layui.form;
    //     //监听提交
    //     form.on('submit(formDemo)', function (data) {
    //         layer.msg(JSON.stringify(data.field));
    //         return false;
    //     });
    // });
</script>
<script>
    $(function(){

        loadData();

        $("#application").slideToggle();
        $("#switchApplication").click(function(){
            $("#application").slideToggle();
        });

        //提交按钮的单击事件
        $("#submit").click(function () {
            $.ajax({
                type: "POST",
                url: "/user/",
                data: $("#myForm").serialize()+"&_method=PUT",
                dataType:"json",
                success: function(vo){
                    if(vo.code==200) {
                        alert("修改成功!");
                        window.location.href = "/pages/console.html";
                    }else{
                        alert("失败！"+vo.msg);
                    }
                }
            });
        });

    });

    function loadData() {
        $.ajax({
            type:"GET",
            url:"/user/",
            success: function(vo){
                let obj = vo.obj;
                $("input[name='u_logInName']").val(obj.u_logInName);
                $("input[name='u_name']").val(obj.u_name);
                $("input[name='u_phone']").val(obj.u_phone);
                $("input[name='u_email']").val(obj.u_email);
                $("input[name='switch']").val(obj.switch);
            }
        });
    }

</script>
</html>